<template>	
	<view>
		<!-- 搜索组件 -->
		<view class="search-box">
			<my-search @click="gotosearch" bgcolor="#ffffff"></my-search>
			
		</view>
		
		<!-- 轮播图区域 -->
		 <swiper :indicator-dots="true" :autoplay="true" :interval="10000" :duration="1000" :circular="true">
		 	<swiper-item v-for="(item, i) in swiperList" :key="i">
		 		<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
					<image :src="item.image_src"></image>
				</navigator>
		 	</swiper-item>
		 	
		 </swiper>
		 
		 <!-- 分类导航区域 -->		 
		 <view class="nav-list">
		 	<view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHander(item)">
		 		<image :src="item.image_src" class="nav_img"></image>
		 	</view>
		 </view>
		 
		 <!-- 楼层区域 -->
		 <view class="floor_list">
			
			 <view class="floor_item" v-for="(item,i) in floorList" :key="i">
				  <!-- 楼层标题 -->
				 <image :src="item.floor_title.image_src" class="floor-title"></image>
				 <!-- 楼层图片 -->
				 <view class="floor-image-box">
				 				 <!-- 左侧大图片 -->
				 				 <navigator class="left-image-box" :url="item.product_list[0].url">
				 					 <image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
				 				 </navigator>
				 				 <!-- 右侧4张小图片 -->
								 <view class="right-image-box">
									 <navigator :url="item2.url" class="right-image-item" v-for="(item2,i2) in item.product_list" :key="i2" v-if="i2 !==0">
									 	 <image :src="item2.image_src" :style="{width:item2.image_width + 'rpx'}" mode="widthFix"></image>
									 </navigator>
								 </view>
				 				 
				 </view>
			 </view>
		
		 </view>
	</view>

</template>

<script>
	import {mixinsTest} from '@/mixins/tabbar-badge.js'
	export default {
			mixins:[mixinsTest],
		data() {
			return {
				//轮播图数据
				swiperList:[],
				//分类导航数据
				navList:[],
				//楼层数据
				floorList:[]
				
			};
		},
	
		onLoad() {
			//调用方法，获取轮播图数据
			this.getSwiperList()
			//调用方法，获取分类导航数据
			this.getNavList()
			//调用方法，获取楼层数据
			this.getFloorList()
		},
		methods:{
			async getSwiperList(){
				const {data:res} =await uni.$http.get('/api/public/v1/home/swiperdata')
				//console.log(res)
				if(res.meta.status!==200) return uni.$showMsg()
				this.swiperList=res.message
				//uni.$showMsg('数据加载成功。')
			},
			async getNavList(){
				const {data:res} =await uni.$http.get('/api/public/v1/home/catitems')
				//console.log(res)
				if(res.meta.status!==200) return uni.$showMsg()
				this.navList=res.message
			},
			navClickHander(item){
				if(item.name==='分类'){
					uni.switchTab({
						url:'/pages/cate/cate'
					})
				}
			},
			async getFloorList(){
				const {data:res} =await uni.$http.get('/api/public/v1/home/floordata')
				console.log(res)
				if(res.meta.status!==200) return uni.$showMsg()
				res.message.forEach(floor=>{
					floor.product_list.forEach(prod=>{
						prod.url='/subpkg/goods_list/goods_list?'+prod.navigator_url.split('?')[1]
					})
				})
				this.floorList=res.message
			},
			gotosearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	swiper{
		height: 330rpx;
		.swiper-item,
		image{
			height: 100%;
			width: 100%;
		}
	}
	.nav-list{
		display: flex;
		justify-content: space-around;
		margin: 15px 0;
		.nav_img{
			height: 140rpx;
			width: 128rpx;
		}
	}
	.floor-title{
		width: 100%;
		height: 60rpx;
		
	}
	.right-image-box{
		display: flex;//弹性布局
		flex-wrap: wrap;//元素换行
		justify-content: space-around;//分散对齐
	}
	.floor-image-box{
		display: flex;
		padding-left: 10rpx;
		
	}
	.search-box{
		position: sticky;//设定为吸顶效果
		top: 0;//吸顶位置
		z-index: 999;//设定最高层级，防止被覆盖
	}

</style>
